<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>审批详情(合同)</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/form.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="css/header.css" />
    <link rel="stylesheet" type="text/css" href="css/examine_detail.css" />
    <style>
        .aui_list {
            width: 95%;
            margin: 0.5rem auto;
            background: #fff;
            border-radius: 8px;
            padding: 10px 14px 8px 14px;
        }

        .top_box {
            background: #fff;
            border-top: solid 0.5px #eee;
            box-shadow: 0px 1px 7px 0px rgba(60, 128, 209, 0.14);
        }

        .contain_main {
            padding: 20px 20px 16px 20px;
        }

        .examine_title {
            font-size: 0.85rem;
            font-weight: 500;
        }

        .examine_con {
            padding: 0px 0px 8px 0px;
            overflow: hidden;
        }

        .examine_con_list {
            width: 100%;
            padding: 8px 0px;
            overflow: hidden;
        }

        .ex_con_lft {
            width: 24%;
            color: #828c9a;
            font-size: 0.75rem;
            float: left;
        }

        .ex_con_rgt {
            width: 75%;
            color: #222;
            float: right;
            font-size: 0.75rem;
        }

        .examine_statue {
            width: 100%;
            /* padding-top: 8px; */
            font-size: 0.75rem;
        }

        .tongguo {
            color: #2cb348;
        }

        .ex_pad {
            padding: 20px 0px;
        }

        .icon_type {
            position: absolute;
            left: -15px;
            width: 40px;
            float: left;
            font-size: 0.7rem;
            line-height: 40px;
            padding-top: 5px;
            color: #fff;
        }

        .examine_table {
            background: #F6FBFF;
            border-radius: 10px;
            padding: 10px 12px;
            margin-top: 5px;
            color: #222;
        }

        .examine_table ul {
            width: 100%;
            height: auto;
            overflow: hidden;
        }

        .examine_table ul li {
            line-height: 1rem;
            margin: 4px 0px;
        }

        .pic_box {
            width: 100%;
            margin-top: 10px;
            overflow: hidden;
        }

        .wenjian_box {
            width: 100%;
            margin-top: 5px;
            overflow: hidden;
        }

        .wenjian_item {
            width: 100%;
            height: 1.6rem;
            line-height: 1.6rem;
            border-radius: 5px;
            background: #F6FBFF;
            margin-bottom: 4px;
        }

        .wj_name {
            width: 80%;
            float: left;
            font-size: 0.75rem;
            padding-left: 10px;
        }

        .imglist_item {
            width: 24.8%;
        }

        .imglist_item img {
            margin-left: 5px;
            margin-right: 5px;
        }

        .timearea {
            width: 135px;
            height: 50px;
            margin-top: 14px;
            border-left: solid 0.5px #828c9a;
        }

        .time_point {
            width: 100%;
            height: 20px;
            line-height: 20px;
            color: #828c9a;
        }

        .mt20 {
            margin-top: 10px;
        }

        .showdetail {
            width: 100%;
            text-align: center;
            margin-top: 15px;
            padding-top: 10px;
            color: #828c9a;
            border-top: solid 0.5px #eee;
        }
        .next_jilu{
            width: 100%;
            font-size: 0.7rem;
        }
        .next_jilu span{
            float: right;
        }
        .next_jilu_onelft{
            width: 80%;
            line-height: 0.9rem;
            float: left;
        }
        .next_jilu_onergt{
            width: 19%;
            float: right;
            text-align: right;
        }
        .moreContent{
            width: 100%;
            padding: 20px 15px;
            font-size: 0.8rem;
            line-height: 1.5rem;
        }
        .moreContent span{
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <section class="aui-content contentBox">
            <!--合同申请 -->
            <!-- v-if="FormData.Type==10" -->
            <div>
                <div class="aui_list boxarea mb20">
                    <div class="">
                        <div v-on:click="do_open_housedetail()" class="work_title" style="margin-bottom: 10px;">
                            基本信息
                        </div>
                        <div class="examine_con">
                            <div class="examine_con_list" v-on:click="othercomputer_detail(form.CompanyID)">
                                <div class="ex_con_lft">外包单位</div>
                                <div class="ex_con_rgt" style="color: #289fff;">{{form.CompanyName}} <i
                                        class="icon iconfont icon-xiangyoujiantou"
                                        style="float: right; margin-left: 5px; font-weight:normal; font-size: 0.7rem; color: #ccc;"></i>
                                </div>
                            </div>
                            <div class="examine_con_list">
                                <div class="ex_con_lft">合同编码</div>
                                <div class="ex_con_rgt">{{form.No}}</div>
                            </div>
                            <div class="examine_con_list">
                                <div class="ex_con_lft">合同类型</div>
                                <div class="ex_con_rgt">{{form.TypeName}}</div>
                            </div>
                            <div class="examine_con_list">
                                <div class="ex_con_lft">合同名称</div>
                                <div class="ex_con_rgt">{{form.Name}}</div>
                            </div>
                            <div class="examine_con_list">
                                <div class="ex_con_lft">合同总价</div>
                                <div class="ex_con_rgt">{{form.Price}}元</div>
                            </div>
                            <div class="examine_con_list">
                                <div class="ex_con_lft">质保金</div>
                                <div class="ex_con_rgt">{{form.CashPrice}}元</div>
                            </div>
                            <div class="examine_con_list">
                                <div class="ex_con_lft" style="width: 30%;">合同开始日期</div>
                                <div class="ex_con_rgt" style="width: 60%;">{{form.StartTime}}</div>
                            </div>
                            <div class="examine_con_list">
                                <div class="ex_con_lft" style="width: 30%;">合同结束日期</div>
                                <div class="ex_con_rgt" style="width: 60%;">{{form.EndTime}}</div>
                            </div>
                            <div class="examine_con_list">
                                <div class="ex_con_lft">结算方式</div>
                                <div class="ex_con_rgt">{{form.SettlementName}}</div>
                            </div>
                            <div v-if="showdetail">
                                <div class="examine_con_list">
                                    <div class="examine_statue" style="color: #828c9a;">合同事宜</div>
                                    <div class="examine_statue" style="padding-top: 4px;color: #222;">
                                        {{form.Arrangements}}
                                    </div>
                                </div>
                                <div class="examine_con_list">
                                    <div class="examine_statue" style="color: #828c9a;">合同说明</div>
                                    <div class="examine_statue" style="padding-top: 4px;color: #222;">
                                        {{form.Range}}
                                    </div>
                                </div>
                                <div class="examine_con_list">
                                    <div class="examine_statue" style="color: #828c9a;">支付说明</div>
                                    <div class="examine_statue" style="padding-top: 4px;color: #222;">
                                        {{form.PayMark}}
                                    </div>
                                </div>
                                <div class="examine_con_list">
                                    <div class="examine_statue" style="color: #828c9a;">附件信息</div>
                                    <div class="examine_statue">
                                        <!-- 图片 -->
                                        <div class="pic_box">
                                            <div class="imglist_item" v-for="(item,index) in form.Picture">
                                                <img v-on:click="do_viewimages(index)" class="imgitem ml4"
                                                    :src="item.ImgPath" />
                                            </div>
                                        </div>
                                        <!-- 文件 -->
                                        <!-- <div class="wenjian_box">
                                            <div class="wenjian_item">
                                                <div class="wj_name ellipsis_one">个人转正申请表.doc</div>
                                            </div>
                                            <div class="wenjian_item">
                                                <div class="wj_name ellipsis_one">个人工作记录汇总表.doc</div>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>

                            </div>
                            <div v-if="!showdetail" class="showdetail" v-on:click="open_all()">显示详情信息
                                <i class="icon iconfont icon-down" style="font-size: 0.7rem; color: #828c9a;"></i>
                            </div>
                            <div v-if="showdetail" class="showdetail" v-on:click="close_all()">只显示关键信息
                                <i class="icon iconfont icon-shangjiantou" style="font-size: 0.7rem; color: #828c9a;"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aui_list boxarea mb20">
                    <div class="work_title" style="margin-bottom: 10px;">
                        付款记录
                    </div>
                    <div class="examine_con">
                        <div v-if="form.PayLogList!=undefined&&form.PayLogList.length>0" class="examine_con_list">
                            <div class="examine_statue examine_table" v-for="item in form.PayLogList">
                                <div class="next_jilu">
                                    <div class="next_jilu_onelft">{{item.Times}}</div>
                                    <div class="next_jilu_onergt">{{item.StatusDesc}}</div>
                                </div>
                                <div class="next_jilu">{{item.CreateTime}}<span>￥{{item.PayPrice}}</span></div>
                            </div>
                        </div>
                        <div v-if="form.PayLogList!=undefined&&form.PayLogList.length<=0" class="noinfo" id="noorder" >
                            <img src="../image/index/noinfomsg_icon.png" alt="" />
                            <h5><br />暂无数据</h5>
                        </div>
                    </div>
                </div>
                <div class="aui_list boxarea mb20">
                    <div class="work_title" style="margin-bottom: 10px;">
                        罚款记录
                    </div>
                    <div class="examine_con">
                        <div v-if="form.OutPayLogList!=undefined&&form.OutPayLogList.length>0" class="examine_con_list">
                            <div class="examine_statue examine_table" v-for="item in form.OutPayLogList">
                                <div class="next_jilu">
                                    <div class="next_jilu_onelft">{{item.Remark}}</div>
                                    <div class="next_jilu_onergt">{{item.StatusDesc}}</div>
                                </div>
                                <div class="next_jilu">{{item.CreateTime}}<span>￥{{item.PayPrice}}</span></div>
                            </div>
                        </div>
                        <div v-if="form.OutPayLogList!=undefined&&form.OutPayLogList.length<=0" class="noinfo" id="noorder" >
                            <img src="../image/index/noinfomsg_icon.png" alt="" />
                            <h5><br />暂无数据</h5>
                        </div>

                    </div>
                </div>

            </div>
           
            <!--审批轨迹-->
            <div class="aui_list boxarea mb20">
                <div class="work_title">审批轨迹</div>
                <div class="gj_con">
                    <ul class="processul">
                        <li class="processulli  li-border-color-grey" v-for="item in form.TrailList">
                            <div class="icon_type">{{item.StepName}}
                                <img v-if="item.State==1||item.State==4"
                                    style=" position: absolute; width: 20px; height: 20px;  right:-3px; bottom: -4px;"
                                    src="../image/yes.png">
                                <img v-if="item.State==3||item.State==2"
                                    style=" position: absolute; width: 20px; height: 20px;  right:-3px; bottom: -4px;"
                                    src="../image/loads.png">
                                <img v-if="item.State==5"
                                    style=" position: absolute; width: 20px; height: 20px;  right:-3px; bottom: -4px;"
                                    src="../image/close.png">
                                <img v-if="item.State==6"
                                    style=" position: absolute; width: 20px; height: 20px;  right:-3px; bottom: -4px;"
                                    src="../image/cx.png">

                            </div>
                            <div class="task_process_con con_right">
                                <div class="handle">
                                    <div class="task_process_basic_title">
                                        <div class="task_process_basic_title_name fl" v-bind:class="{'max-width':item.AcceptTime==''}">
                                            <div class="fl">{{item.AcceptName}}</div>
                                            <div class="cl"></div>
                                        </div>
                                        <div class="task_process_basic_title_time ccc fr">{{item.AcceptTime}}</div>
                                        <div class="cl"></div>
                                        <div class="handle_con_msg ">
                                            {{set_value(item.AcceptCont)}}
                                            <span v-if="item.AcceptCont.length>30" v-on:click="open_more(item)" class="jiedian look_more">更多</span>
                                        </div>
                                        <div class="cl"></div>
                                        <van-popup v-model="showmore" style="width: 80%; border-radius: 10px;">
                                            <div class="moreContent"><span>{{moreName}}</span>：{{moreContent}}</div>
                                        </van-popup>
                                    </div>
                                </div>
                                <div class="hide_height"></div>
                            </div>
                        </li>
                       
                    </ul>
                </div>
            </div>
        </section>
    </div>

</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/aui-popup.js"></script>
<script type="text/javascript " src="js/hetong_detail.js"></script>

</html>